import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'

import type { FormModalDto } from '@/components/modal/Modal'
import renderModal, { getModelValue } from '@/components/modal/Modal'
import { getBase64FromFile } from '@/utils/util'
import { updateBulletWorkIdCardPhoto } from '@/api/bullet'

@Component
export class DialogUpdatePhoto extends TableRender {
    @Prop() show!: boolean
    @Prop() recordId!: number

    showDialog = false
    showDialogDetail = false
    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show')
    handleWatchShow(val: boolean) {
        this.showDialog = val
        if(this.show) {
            this.basicFormConfig.show = true
        }
    }

    @Watch('showDialog')
    handleWatchShowDialog(val: boolean) {
        this.updateShow(val)
    }

    basicFormConfig = this.initBasicFormConfig() as FormModalDto
    initBasicFormConfig() {
        return {
            title: '上传身份证正反面',
            width: '450px',
            theme: 'light',
            show: false,
            labelCol: {
                width: '8em'
            },
            noPadding: true,
            items: {
                ownIdCardFront: {
                    name: '身份证正面',
                    element: 'upload',
                    params: {
                        autoUpload: false,
                        accept: '.png,.jpg,.jpeg',
                        listType: 'picture-card',
                    },
                    required: true
                },
                ownIdCardBack: {
                    name: '身份证反面',
                    element: 'upload',
                    params: {
                        autoUpload: false,
                        listType: 'picture-card',
                        accept: '.png,.jpg,.jpeg',
                    },
                    required: true
                },
            },
            complete: async () => {
                const data = getModelValue(this.basicFormConfig)
                if (data.ownIdCardFront?.length) {
                    data.ownIdCardFront = getBase64FromFile(data.ownIdCardFront[0])
                }
                if (data.ownIdCardBack?.length) {
                    data.ownIdCardBack = getBase64FromFile(data.ownIdCardBack[0])
                }
                data.id = this.recordId
                await updateBulletWorkIdCardPhoto(data)
                this.basicFormConfig.show = false
                this.handleRefresh()
            },
            cancel: () => {
                this.basicFormConfig.show = false
                this.updateShow(false)
            },
            init: () => {
            }
        } as FormModalDto
    }

    render() {
        return (
            <>{renderModal(this.basicFormConfig)}</>
        )
    }
}

export default toNative<{recordId: number}, {refresh: () => void}>(DialogUpdatePhoto)
